<template>
  <div>
        <div class="c1">
      <p>品牌制作商直供</p>

      <ul>
        <li v-for="(item,index) in photoArr" :key="index">
          <img :src="item.pic_url" alt="">
          <div class="box">
            <p>{{item.name}}</p>
            <p style="color:darkred">￥{{item.floor_price.toFixed(2)}}元</p>
          </div>
        </li>
      </ul>
    </div>

    <div class="c2">
      
      <p>周一周四新品首发</p>

      <ul>
        <li v-for="(item,index) in photo2Arr" :key="index">
          <img :src="item.list_pic_url" alt="">
          <div class="box">
            <p>{{item.name}}</p>
            <p style="color:darkred">￥{{item.retail_price.toFixed(2)}}元</p>
          </div>
        </li>
      </ul>
    </div>

  <div class="c3">
      <p>人气推荐</p>
      <ul v-for="(item,index) in photo3Arr" :key="index">
        <li>
          <img :src="item.list_pic_url" alt="">
        </li>
        <li style="flex:3 ">
          <h3>{{item.name}}</h3>
          <p style="font-size:0.01rem">{{item.goods_brief}}</p>
          <p style="color: darkred">￥{{item.retail_price.toFixed(2)}}元</p>
        </li>
      </ul>
  </div>

  <div class="c4">
    <p style="padding: 0.2rem">专题精选</p>

    <van-swipe :show-indicators="false">
      <van-swipe-item v-for="(item,index) in photo4Arr" :key="index">
        <img :src="item.scene_pic_url" alt="">
        <div class="ct">
          <div class="ctbox">
            <h3>{{item.title}}</h3><p style="color:darkred">￥{{item.price_info.toFixed(2)}}元</p>
          </div>
          <p>{{item.subtitle}}</p>
        </div>
      </van-swipe-item>
    </van-swipe>
  </div>

  <div class="tong" v-for="(item,index) in photo5Arr" :key="index">
    <p style="padding: 0.2rem">{{item.name}}</p>
    <div class="tong_Foot">
      <div class="sbox" v-for="(ele,i) in item.goodsList" :key="i">
        <img :src="ele.list_pic_url" alt="">
        <h3>{{ele.name}}</h3>
        <span style="color: darkred">￥{{ele.retail_price.toFixed(2)}}元</span>
    </div>
    </div>
    
  </div>


  </div>
</template>

<script>

import { getData } from "@/request/api";
export default {
    data(){
        return{
            photoArr:[],
            photo2Arr:[],
            photo3Arr:[],
            photo4Arr:[],
            photo5Arr:[]
        }
    },
    
  created() {
    getData()
      .then((res) => {
        this.photoArr = res.data.brandList;
        this.photo2Arr = res.data.newGoodsList;
        this.photo3Arr = res.data.hotGoodsList;
        this.photo4Arr = res.data.topicList;
        // this.jujia = res.data.categoryList.goodsList;

        this.photo5Arr = res.data.categoryList;
        console.log(this.photo5Arr);
      })
      .catch((err) => {
        console.log(err);
      });
 
  },
}
</script>

<style>
.tong p{
  display: block;
  padding: 0.2rem;
  margin-top: 0.15rem;
}
.tong_Foot{
  display: flex;
  flex-wrap: wrap;
}
.sbox{
  width: 50%;
}
.sbox img{
  width: 100%;
}
.sbox h3 {
  margin-bottom: 0.1rem;
}
</style>